<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="128px"
      label-position="right"
      class="flex-form-3 basic-form"
      size="mini"
      v-if="dialogType != 'detail'"
    >
      <el-form-item label="企业所属分支机构海关" prop="partOrgId">
        <el-input
          v-model.trim="form.partOrgId"
          placeholder="请输入企业所属分支机构海关"
        />
      </el-form-item>
      <el-form-item label="所属分支机构名称" prop="belongOrgName">
        <el-input
          v-model.trim="form.belongOrgName"
          placeholder="请输入所属分支机构名称"
        />
      </el-form-item>
      <el-form-item label="所属分支机构地址" prop="belongOrgAddress">
        <el-input
          v-model.trim="form.belongOrgAddress"
          placeholder="请输入所属分支机构地址"
        />
      </el-form-item>
      <el-form-item label="所属分支机构负责人" prop="belongOrgPrincinal">
        <el-input
          v-model.trim="form.belongOrgPrincinal"
          placeholder="请输入所属分支机构负责人"
        />
      </el-form-item>
      <el-form-item label="所属分支机构联系电话" prop="belongOrgPhone">
        <el-input
          v-model.trim="form.belongOrgPhone"
          placeholder="请输入所属分支机构联系电话"
        />
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" v-if="dialogType != 'detail'">
      <el-col :span="1.5">
        <el-button
          v-if="editIndex != -1"
          type="primary"
          plain
          icon="el-icon-edit"
          @click="handleSaveEdit"
          size="mini"
          >保存修改</el-button
        >
        <el-button
          v-else
          plain
          icon="el-icon-plus"
          type="success"
          @click="handleAddEdit('add')"
          size="mini"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <basic-table
      ref="tableList"
      :columns="columns"
      size="mini"
      :tableData="tableDataPage"
      :total="tableData.length"
      :pageSize="pageParams.pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      :emptySmall="true"
    >
      <template #operate="scope" v-if="dialogType != 'detail'">
        <div class="option-menu">
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleAddEdit('edit', scope.row, scope.index)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="mini"
            class="table-edit"
            @click="handleDelete(scope.index, tableData)"
          >
            删除
          </el-button>
        </div>
      </template>
    </basic-table>
  </div>
</template>

<script>
export default {
  name: "AbroadInfo",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    partOrgsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        id: null,
        eportSubId: null,
        coInfoId: null,
        partOrgId: null,
        belongOrgName: null,
        belongOrgAddress: null,
        belongOrgPrincinal: null,
        belongOrgPhone: null,
        operationType: null,
      },
      // 表单校验
      rules: {
        coInfoId: [
          { required: true, message: "企业表ID不能为空", trigger: "blur" },
        ],
        partOrgId: [
          {
            required: true,
            message: "企业所属分支机构海关关键字不能为空",
            trigger: "blur",
          },
        ],
        belongOrgName: [
          {
            required: true,
            message: "所属分支机构名称不能为空",
            trigger: "blur",
          },
        ],
      },
      editIndex: -1,
      // 列表数据
      tableData: [],
      columns: [
        {
          prop: "belongOrgName",
          label: "所属分支机构名称",
          align: "center",
        },
        {
          prop: "belongOrgAddress",
          label: "所属分支机构地址",
          align: "center",
        },
        {
          prop: "belongOrgPrincinal",
          label: "所属分支机构负责人",
          align: "center",
        },
        {
          prop: "belongOrgPhone",
          label: "所属分支机构联系电话",
          align: "center",
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 140,
          fixed: "right",
        },
      ],
      pageParams: {
        pageNum: 1,
        pageSize: 5,
      },
    };
  },
  computed: {
    tableDataPage() {
      let arr = this.tableData;
      const start = (this.pageParams.pageNum - 1) * this.pageParams.pageSize;
      const end = this.pageParams.pageNum * this.pageParams.pageSize;
      return arr.slice(start, end);
    },
  },
  watch: {
    partOrgsData: {
      immediate: true,
      handler(val) {
        this.tableData = val;
      }
    }
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageParams.pageSize = val.pageSize;
    },
    handleCurrentChange(val) {
      this.pageParams.pageNum = val.currentPage;
    },
    initForm() {
      this.form = {
        id: null,
        eportSubId: null,
        coInfoId: null,
        partOrgId: null,
        belongOrgName: null,
        belongOrgAddress: null,
        belongOrgPrincinal: null,
        belongOrgPhone: null,
        operationType: null,
      };
    },
    // 新增/编辑
    handleAddEdit(type, row, index) {
      if (type === "add") {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            this.tableData.unshift({ ...this.form });
            this.$emit("receivePartOrgs", this.tableData);
            this.initForm();
            this.$refs["form"].resetFields();
          }
        });
      } else {
        this.form = { ...row };
        this.editIndex = index;
      }
    },
    // 保存修改
    handleSaveEdit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.tableData.splice(this.editIndex, 1, { ...this.form });
          this.$emit("receivePartOrgs", this.tableData);
          this.initForm();
          this.$refs["form"].resetFields();
          this.editIndex = -1;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index, rows) {
      rows.splice(index, 1);
      this.$emit("receivePartOrgs", this.tableData);
      //计算当前页是否需要前移
      let totalPage = Math.ceil(
        this.tableData.length / this.pageParams.pageSize
      );
      if (this.pageParams.pageNum > 1 && this.pageParams.pageNum > totalPage) {
        this.pageParams.pageNum -= 1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.basic-form {
  ::v-deep .el-form-item__label {
    line-height: 16px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
